<!-- <script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script> -->
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import PropType from './components/PropType.vue'
import ComputedAndMethods from './components/ComputedAndMethods.vue'
import ComSetup from './components/ComSetup.vue'
import ComVuex from './components/ComVuex.vue'
import ComVuex1 from './components/ComVuex1.vue'
import ComModule from './components/ComModule.vue'
type Todo = {
  id: number,
  name: string,
  completed: boolean
}


export default defineComponent({
  components: {
    HelloWorld,
    PropType,
    ComputedAndMethods,
    ComSetup,
    ComVuex,
    ComVuex1,
    ComModule
  },
  setup() {
    return {
      content: 'test',
      arr: [] as Todo[]
    }
  },
  created () {
    this.arr.push({ id: 1, name: 'tom', completed: true })
    this.arr.push({ id: 2, name: 'Andy', completed: false })
  }
})
</script>

<template>
  {{ content }}
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <prop-type
    :title-info="{ color: 'red', value: 'Vue3开发' }"
    :content-info="{ color: 'blue', value: 'typescript开发' }" />
    <computed-and-methods />
  <com-setup :title-info="{ id: 1, name: 'sss' }" />
  <com-vuex />
  <com-vuex1 />
  <com-module />
  <router-link to="/">待办列表</router-link>
  <router-link to="/add">新增</router-link>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
